import { useEffect } from 'react'

import { Address, Amazon, Logistics, OriginalRoute, RouteLine, TransferOrderNumRoute } from '../components'
import { Attachment } from './Attachment'
import { BaseInfo } from './BaseInfo'
import { Comment } from './Comment'
import { CustomerInfo } from './CustomerInfo'
import { CustomerNotice } from './CustomerNotice'
import { Dynamicfields } from './Dynamicfields'
import { PublishRoute } from './PublishRoute'
import { eventBus, popupSlot, useUrlParams } from './utils'
import styles from './styles.module.less'

// 所有模块约定：固定高度、loading反馈、Empty显示
export const Detail = () => {
  const { waybillNo } = useUrlParams()

  // 清理
  useEffect(() => () => eventBus.offAll(), [])

  return (
    <div className={styles.box}>
      <BaseInfo />

      {/* 左右布局 */}
      <div className={styles.main}>
        <div className={styles.left}>
          <div className={styles.left_top}>
            {/* 地址信息 */}
            <Address waybillNo={waybillNo} />
            {/* 物流信息 */}
            <Logistics waybillNo={waybillNo} />
          </div>
          {/* tms发布路由 */}
          {$APP === 'TMS' && <PublishRoute />}
          {/* oms客户通知 */}
          {$APP === 'OMS' && <CustomerNotice />}
          {/* 留言 */}
          <Comment />
          {/* 附件 */}
          <Attachment />
        </div>

        <div className={styles.right}>
          {/* 亚马逊信息 */}
          <Amazon waybillNo={waybillNo} />
          {/* tms占位符 */}
          {$APP === 'TMS' && <Dynamicfields />}
          {/* tms原始路由 */}
          {$APP === 'TMS' && <OriginalRoute waybillNo={waybillNo} />}
          {/* oms路由 */}
          {$APP === 'OMS' && <RouteLine waybillNo={waybillNo} />}
          {/* oms客户信息 */}
          {$APP === 'OMS' && <CustomerInfo />}
          {/* 转单号路由 */}
          <TransferOrderNumRoute waybillNo={waybillNo} />
        </div>
      </div>

      <popupSlot.Slot />
    </div>
  )
}
